<template>
  <leftRightSplit :left-span="4">
    <template #left>
      <ContentWrap title="流程应用">
        <el-tree
          :data="appList"
          node-key="key"
          :default-expand-all="true"
          :props="defaultProps"
          @node-click="chioseApp"
        />
      </ContentWrap>
    </template>
    <template #right>
      <ContentWrap :title="title">
        <div class="app-container">
          <Search
            ref="search"
            :schema="schema"
            :model="queryParam"
            :is-col="false"
            layout="inline"
            :showSearch="true"
            button-position="left"
            :search-loading="loading"
            :reset-loading="loading"
            @search="search"
            @reset="search"
          />
        </div>
        <Table :data="logList" :columns="columns" row-key="Id" :pagination="paging" @change="load">
          <template #progressVal="e">
            <el-progress :text-inside="true" :stroke-width="20" :percentage="e.row.ProgressVal" />
          </template>
          <template #auditStatus="e">
            <span :style="{ color: FlowAuditStatus[e.row.AuditStatus].color }">
              {{ FlowAuditStatus[e.row.AuditStatus].text }}</span
            >
          </template>
          <template #curItem="e">
            <div v-if="e.row.CurItem">
              <span v-for="(i, index) in e.row.CurItem" :key="i.NodeId" class="rowSpan">
                {{ index + 1 + '，' + i.NodeName + i.Show }} {{ i.EmpName }}
              </span>
            </div>
          </template>
          <template #status="e">
            <span v-if="e.row.Status == 0" style="color: #909399">待开始</span>
            <span v-else-if="e.row.Status == 1" style="color: #409eff">进行中</span>
            <template v-else-if="e.row.Status == 2">
              <span class="rowSpan" style="color: #67c23a">已结束</span>
              <span class="rowSpan">{{ e.row.EndEmp }}</span>
              <span class="rowSpan">{{ $formatTime(e.row.EndTime, 'yyyy-MM-dd HH:mm') }}</span>
            </template>
          </template>
          <template #createBy="e">
            <span class="rowSpan">{{ e.row.CreateName }}</span>
            <span class="rowSpan">{{ $formatTime(e.row.CreateTime, 'yyyy-MM-dd HH:mm') }}</span>
          </template>
          <template #action="e">
            <BaseButton
              size="small"
              type="primary"
              title="查看"
              :icon="viewIcon"
              circle
              @click="show(e.row)"
            />
            <BaseButton
              v-hasPermi="'close'"
              v-if="e.row.Status != 2"
              size="small"
              type="danger"
              title="关闭流程"
              :icon="closeIcon"
              circle
              @click="cancel(e.row)"
            />
          </template>
        </Table>
      </ContentWrap>
    </template>
  </leftRightSplit>
</template>

<script>
import { EnumDic, FlowAuditStatus } from '@/flow/config/flowConfig'
import { GetList } from '@/flow/api/flowApp'
import * as auditLogApi from '@/flow/api/auditLog'
import { Search } from '@/components/Search'
import { Table } from '@/components/Table'
import { useIcon } from '@/hooks/web/useIcon'
export default {
  components: {
    Search,
    Table
  },
  data() {
    return {
      EnumDic,
      FlowAuditStatus,
      closeIcon: useIcon({ icon: 'ep:close' }),
      viewIcon: useIcon({ icon: 'ep:view' }),
      appList: [],
      logList: [],
      title: '所有流程',
      loading: false,
      id: null,
      visible: false,
      queryParam: {
        Status: null,
        QueryKey: null,
        AppId: null,
        AuditStatus: null,
        Begin: null,
        End: null,
        ToEmpId: null
      },
      schema: [
        {
          field: 'QueryKey',
          label: '标题',
          component: 'Input',
          componentProps: {
            maxLength: 50,
            placeholder: '标题'
          }
        },
        {
          field: 'ToEmpId',
          label: '经办人',
          component: 'EmpInput',
          componentProps: {
            placeholder: '经办人'
          }
        },
        {
          field: 'AuditStatus',
          label: '审批结果',
          component: 'EnumItem',
          componentProps: {
            dicKey: EnumDic.FlowAuditStatus,
            multiple: true,
            sysHead: 'flow',
            placeholder: '审批结果'
          }
        },
        {
          field: 'Status',
          label: '审批状态',
          component: 'EnumItem',
          componentProps: {
            dicKey: EnumDic.FlowAuditLogStatus,
            sysHead: 'flow',
            placeholder: '审批状态'
          }
        },
        {
          field: 'Time',
          label: '审批日期',
          component: 'DatePicker',
          componentProps: {
            type: 'daterange',
            format: 'YYYY-MM-DD',
            valueFormat: 'YYYY-MM-DD',
            startPlaceholder: '开始日期',
            endPlaceholder: '截止日期',
            rangeSeparator: '至',
            clearable: true
          }
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      columns: [
        {
          field: 'DocTitle',
          label: '标题',
          align: 'left',
          minWidth: 200
        },
        {
          field: 'ProgressVal',
          label: '进度',
          align: 'right',
          slotName: 'progressVal',
          width: 150,
          sortable: 'custom'
        },
        {
          field: 'CreateBy',
          label: '发起人',
          align: 'center',
          slotName: 'createBy',
          sortable: 'custom',
          minWidth: 150
        },
        {
          field: 'AuditStatus',
          label: '审批结果',
          align: 'center',
          slotName: 'auditStatus',
          width: 150,
          sortable: 'custom'
        },
        {
          field: 'Status',
          label: '流程状态',
          align: 'center',
          slotName: 'status',
          width: 160,
          sortable: 'custom'
        },
        {
          field: 'CurItem',
          label: '进行中的节点',
          align: 'left',
          slotName: 'curItem',
          minWidth: 150
        },
        {
          field: 'Action',
          label: '操作',
          align: 'left',
          width: 200,
          slotName: 'action'
        }
      ],
      paging: {
        pageSize: 20,
        total: 0,
        currentPage: 1
      }
    }
  },
  computed: {},
  mounted() {
    this.loadApp()
    this.load()
  },
  methods: {
    show(row) {
      this.id = row.Id
      this.visible = true
    },
    reset() {
      this.queryParam.QueryKey = null
      this.queryParam.AuditStatus = null
      this.queryParam.Status = null
      this.queryParam.ToEmpId = null
      this.queryParam.Time = []
      this.queryParam.Begin = null
      this.queryParam.End = null
      this.$refs.search.setValues(this.queryParam)
      this.load()
    },
    chioseApp(app) {
      if (app == null || app.type === 'dir') {
        this.title = '所有流程'
        this.queryParam.AppId = null
      } else {
        this.title = app.label
        this.queryParam.AppId = app.key
      }
      this.reset()
    },
    async loadApp() {
      const res = await GetList(null)
      this.appList = res.map((c) => {
        return {
          key: c.Value,
          label: c.Text,
          type: 'dir',
          children: c.AppList.map((a) => {
            return {
              key: a.Id,
              label: a.AppName,
              type: 'app'
            }
          })
        }
      })
    },
    search(data) {
      this.queryParam.QueryKey = data.QueryKey
      this.queryParam.AuditStatus = data.AuditStatus
      this.queryParam.Status = data.Status
      this.queryParam.ToEmpId = data.ToEmpId
      if (data.Time && data.Time.length > 0) {
        this.queryParam.Begin = data.Time[0]
        this.queryParam.End = data.Time[1]
      } else {
        this.queryParam.Begin = null
        this.queryParam.End = null
      }
      this.load()
    },
    async load(curPaging) {
      if (curPaging == null) {
        curPaging = {
          Size: this.paging.pageSize,
          Index: 1,
          SortName: 'Id',
          IsDesc: true
        }
        this.paging.currentPage = 1
      }
      const res = await auditLogApi.Query(this.queryParam, curPaging)
      if (res.List) {
        res.List.forEach((a) => {
          if (a.CurItem) {
            a.CurItem.forEach((c) => {
              if (c.NodeType === 0) {
                c.Show = '[开始]'
              } else if (c.NodeType === 2) {
                c.Show = '[循环审批]'
              } else if (c.AuditType === 2) {
                c.Show = '[会审]'
              } else if (c.AuditType === 1) {
                c.Show = '[独立]'
              } else {
                c.Show = ''
              }
            })
          }
        })
        this.logList = res.List
      } else {
        this.logList = []
      }
      this.paging.total = res.Count
    },
    cancel(row) {
      const title = '确认关闭流程:' + row.DocTitle + '?'
      this.$confirm(title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.submitCancel(row.Id)
      })
    },
    async submitCancel(id) {
      await auditLogApi.Cancel(id)
      this.$message({
        type: 'success',
        message: '取消成功!'
      })
      this.reset()
    }
  }
}
</script>
<style scoped>
.rowSpan {
  display: inherit;
  width: 100%;
  height: 20px;
  line-height: 20px;
}
</style>
